<template>
  <div>
    <!-- 新增直播 -->
    <el-dialog title="新增直播列表" :visible="dialogVisible" @close="close">
      <el-form
        ref="formRef"
        :rules="rules"
        :model="formData"
        label-width="120px"
      >
        <el-form-item prop="createUser" label="创建人:">
          <el-input
            v-model="formData.createUser"
            placeholder="请输入创建人"
          ></el-input>
        </el-form-item>
        <el-form-item prop="name" label="直播名字:">
          <el-input
            v-model="formData.name"
            placeholder="请输入直播名字"
          ></el-input>
        </el-form-item>
        <el-form-item prop="type" label="直播类型:">
          <el-select v-model="formData.type" placeholder="请输入直播类型">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="projectedTime" label="预计时间:">
          <el-input
            v-model="formData.projectedTime"
            placeholder="请输入预计时间，如果不确定就输入0"
          ></el-input>
        </el-form-item>
        <el-form-item prop="address" label="地址:">
          <el-input
            v-model="formData.address"
            placeholder="请输入地址"
          ></el-input>
        </el-form-item>
        <el-form-item prop="ifShareString" label="是否分享:">
          <el-select v-model="formData.ifShareString" placeholder="请选择">
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="ifPushString" label="是否推送:">
          <el-select v-model="formData.ifPushString" placeholder="请选择">
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>
        <!-- 上传图片 -->
        <el-form-item label="添加图片:" prop="file">
          <el-upload
            ref="upload"
            list-type="picture-card"
            v-model="formData.file"
            action="#"
            :on-preview="handlePreview"
            :auto-upload="false"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :before-upload="beforeUpload"
            :file-list="fileList"
            :limit="1"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="8">
              <el-button size="mini" type="warning" @click="close"
                >取消</el-button
              >
                    <el-button size="mini" type="primary" @click="btnOk"
                >确认</el-button
              >
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 预览弹层 -->
    <el-dialog :visible.sync="showDialog" title="图片预览">
      <img :src="imgUrl" alt="" style="width: 100%" />
    </el-dialog>

    <!-- 路径弹层 -->
    <el-dialog :visible.sync="showDialogFile" title="文件路径">
      <el-form label-width="80px">
        <el-form-item label="">{{ fileUrl }}</el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addPersonnelApi } from "@/api/liveBroadcast";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formData: {
        name: "",
        type: "",
        status: "",
        projectedTime: "",
        createUser: "",
        watchNumber: "",
        address: "",
        ifShareString: "",
        ifPushString: "",
        file: "",
      },
      showDialogFile: false,
      headerPic: "",
      imgUrl: "",
      fileList: [],
      showDialog: false,
      fileUrl: "",
      options: ["风景类", "时事类", "政务类", "销售类"],
      typeMapping: {
        风景类: 0,
        时事类: 1,
        政务类: 2,
        销售类: 3,
      },
      rules: {
        name: [{ required: true, message: "请输入名字", trigger: "blur" }],
        type: [{ required: true, message: "请输入直播类型", trigger: "blur" }],
        projectedTime: [
          { required: true, message: "请输入预计时间", trigger: "blur" },
          {
            min: 1,
            max: 2,
            message: "预计时间的长度为1-2个字符",
            trigger: "blur",
          },
        ],
        createUser: [
          { required: true, message: "请输入创建人", trigger: "blur" },
        ],
        file: [
          { required: true, validator: this.validateImage, trigger: "change" },
        ],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        ifShareString: [
          { required: true, message: "请输入是或者否分享", trigger: "blur" },
          // {
          //   pattern: /^(是|否)$/,
          //   message: "请输入有效的字段",
          //   trigger: "blur",
          // },
        ],
        ifPushString: [
          { required: true, message: "请输入是或者否推送", trigger: "blur" },
          // {
          //   pattern: /^(是|否)$/,
          //   message: "请输入有效的字段",
          //   trigger: "blur",
          // },
        ],
      },
    };
  },
  methods: {
    // 自定义校验
    validateImage(rule, value, callback) {
      // 自定义图片校验逻辑
      const isValid = this.fileList.length > 0; // 校验是否有文件被选中
      if (!isValid) {
        callback(new Error("必须上传图片"));
      } else {
        callback();
      }
    },
    // 预览图片
    handlePreview(file) {
      this.imgUrl = file.url;
      this.showDialog = true;
    },
    // 选择图片
    handleChange(file, fileList) {
      this.headerPic = file.raw;
      this.fileList = fileList.map((item) => item);
    },
    handleRemove() {},
    // 上传前校验
    beforeUpload(file) {
      // console.log(file);
      // 先检查文件类型
      const types = ["image/jpeg", "image/gif", "image/bmp", "image/png"];
      if (!types.some((item) => item === file.type)) {
        // 如果不存在
        this.$message.error("上传图片只能是 JPG、GIF、BMP、PNG 格式!");
        return false;
      }
    },
    // 关闭弹层
    close() {
      // 重置表单数据
      this.$refs.formRef.resetFields();
      this.formData = {};
      // 通知父组件关闭弹层
      this.$emit("update:dialogVisible", false);
    },
    // 点击确认
    async btnOk() {
      try {
        // 表单校验
        await this.$refs.formRef.validate();
        const formData = new FormData();
        const typeMapping = this.typeMapping[this.formData.type];
        console.log(typeMapping);
        formData.append("name", this.formData.name);
        formData.append("type", typeMapping);
        formData.append("projectedTime", this.formData.projectedTime);
        formData.append("createUser", this.formData.createUser);
        formData.append("file", this.headerPic);
        formData.append("address", this.formData.address);
        formData.append("ifShareString", this.formData.ifShareString);
        formData.append("ifPushString", this.formData.ifPushString);
        const res = await addPersonnelApi(formData);
        console.log(res);
        if (res.code === 1) {
          this.fileList = [];
          this.headerPic = "";
          this.$message.success("添加成功");
        }
        this.showDialogFile = true;
        this.fileUrl = res.data;
        this.close();
        this.$emit("liveStreamingList");
      } catch {
        this.$message.error("添加失败");
        return false;
      }
    },
  },
};
</script>

<style scoped></style>
